<template>
    <div class="data-preview">
          <el-row>
              <el-col :span="8">
                  <little-key-value v-for="item in titleArray" :key="item.label" :keys="item.label" :values="item.value"></little-key-value>
              </el-col>
              <el-col :span="16" style="text-align:right;color:#7fcfff;">只显示前100条数据</el-col>
          </el-row>
            <el-table
                :data="tableData"
                style="width: 100%"
                height="250">
                <template v-for="item in columArray">
                    <el-table-column
                    :key="item.k"
                    fixed
                    :prop="item.k"
                    :label="item.name"
                   >
                    </el-table-column>
                </template>
            </el-table>
         <div class="control-box">
            <el-button type="default" @click="prev()">上一步</el-button>
            <el-button type="success" @click="next()">下一步</el-button>
        </div>
    </div>
</template>
<script>
import littleKeyValue from '@/components/LittleKeyValue'
export default {
    name: 'DataPreview',
    components: {
        littleKeyValue
    },
    data () {
        return {
            tableData: [],
            columArray: [
                {
                    k: 'name',
                    name: '你好'
                },
                {
                    k: 'name1',
                    name: '你好'
                },
                {
                    k: 'name2',
                    name: '你好'
                },
                {
                    k: 'name3',
                    name: '你好'
                }
            ],
            titleArray: [
                {
                    value: '1',
                    label: '行数'
                },
                {
                    value: '2',
                    label: '列数'
                },
                {
                    value: '3',
                    label: '大小'
                }
            ]
        }
    },
    methods: {
        prev () {
            this.$emit('prevStep', 1)
        },
        next () {
            this.$emit('nextStep', 3)
        }
    }
}
</script>
<style lang="less">
    .data-preview{
         padding: 20px 5%;
        .control-box{
            padding: 30px 0;
            float:inherit;
            text-align:center;
        }
    }
</style>
